<template>
  <el-select
    v-model="userId"
    :placeholder="dataList.Placeholder"
    filterable
    :multiple="multiple"
    remote
    reserve-keyword
    :remote-method="remoteUser"
    @change="change"
  >
    <el-option
      v-for="item in userList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import {userDetail,getUserListNoPage} from "@/ModulePermission/api/Permission/PermissionUser.js";
export default {
  name: "UserDropDownList",
  components: {},
  props: {
    value: {
      type: String,
      default: "",
    },
    returnObjct: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    borrowPersonChange: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      userList: [],
      userId: this.value,
    };
  },
  computed: {
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    value(val) {
      this.userId = val;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    change() {
      if (!this.multiple) {
       userDetail({ id: this.userId }, { pageIndex: 1, pageSize: 100 })
          .then((res) => {
            var userObj = res.data;
            this.$emit("getData", userObj);
          });
      }
      if (this.multiple) {
        this.borrowPersonChange(this.userId);
      } else {
        if (this.returnObjct) {
          var label = this.userList.find(
            (item) => item.id === this.userId
          ).name;
          var data = {
            value: this.userId,
            label: label,
          };
          this.$emit("input", data);
        } else {
          this.$emit("input", this.userId);
        }
      }
    },
    initData() {
    getUserListNoPage({ userStatus: 1 })
        .then((res) => {
          this.userList = res.data;
        });
    },
    remoteUser(query) {
   getUserListNoPage({ name: query, userStatus: 1 })
        .then((res) => {
          this.userList = res.data;
        });
    },
  },
};
</script>
<style scoped></style>
